<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>搜索</title>
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mui.css?v=1">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mobileSelect.css" />
		<link rel="stylesheet" href="__API__/lib/css/style.css">
		<script type="text/javascript" src="__API__/lib/js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/mui.js"></script>
		<script src="__API__/lib/js/mobileSelect.js" type="text/javascript" charset="utf-8"></script>
		<script src="__API__/lib/js/city.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="__API__/lib/js/swiper.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/vue.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/common.js"></script>
		<script type="text/javascript" src="__API__/lib/js/index.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script></head>

	<body>
		<div class="search_page" id="app">
			<div class="search_box">
				<div class="back" @click="goBack()">
					<img src="__API__/lib/images/back.png" alt="">
				</div>
				<div class="search_input">
					<i class="searchicon"><img src="__API__/lib/images/h_search.png" /></i>
					<input type="text" name="" id="" v-model="searchValue" placeholder="舒缓修复精华" />
				</div>
				<button class="searchbtn" @click="onSearch">搜索</button>
			</div>
			<div class="sht"></div>
			<!--header end-->
			<div class="search">
				<div class="search_info">
					<div class="search_head">
						<h3>历史搜索</h3>
						<i class="delsearch" v-if="historyList.length > 0" @click="delHistory"><img src="__API__/lib/images/del.png"/></i>
					</div>
					<ul class="search_ul" v-if="historyList.length > 0">
						<li v-for="(item,i) in historyList" :key="i" @click="choose(item.title)">{{item.title}}</li>
					</ul>
					<p v-else>暂无搜索历史</p>
				</div>
				<div class="search_info">
					<div class="search_head">
						<h3>热门搜索</h3>
					</div>
					<ul class="search_ul" v-if="hotList.length > 0">
						<li v-for="(item,i) in hotList" :class="{'blue':i == 0}" :key="i" @click="choose(item)"><img v-if="i == 0" src="__API__/lib/images/hot.png" alt="">{{item}}</li>
					</ul>
					<p v-else>暂无搜索历史</p>
				</div>
			</div>
		</div>
		<script>
			var app = null;
			app = new Vue({
				el: '#app',
				data: {
					searchValue: '',
					historyList: [

					],
					hotList: [

					]
				},
				created: function() {
					let that = this;
					common.ajax("{:url('Base/history_search')}",{token:localStorage.getItem('token')} , function(res){
								that.historyList = res.data;
								that.hotList = res.hot_data;
				})
				},
				methods: {
					delHistory(){
						let that = this;
						common.Confirm('是否清空历史搜索？', ' ', function () {
							common.ajax("{:url('Base/history_clear')}", {token: localStorage.getItem('token')}, function (res) {
								that.historyList = [];
							})
						})
						
					},
					goDetail(url) {
						common.openUrl(url)
					},
					goBack(){
						common.PageBack();
					},
					choose(value){
						this.searchValue = value;
					},
					onSearch(){
						let that = this;
						if(that.searchValue == ''){
							return common.alert('请输入搜索内容!')
						}
						common.ajax("{:url('Base/history_create')}", {title: that.searchValue,token:localStorage.getItem('token')}, function (res) {

						})
						common.openUrl('searchResult.html?title=' + that.searchValue)
					}
				}
			});
		</script>
	</body>

</html>
